<template>
  <el-dialog title="分配权限" :visible.sync="showDialog">
    <!--
        node-key相当于给tree的每个节点加了唯一标识
        node-key="id"代表用id作为唯一标识
        唯一标识将来就可以用来获取被选中的节点的id，或者设置被选中的节点
     -->
    <el-tree
      v-if="showDialog"
      ref="tree"
      check-strictly
      :data="treeData"
      :props="defaultProps"
      :default-checked-keys="checkedList"
      show-checkbox
      node-key="id"
      default-expand-all
    />

    <div style="text-align:center">
      <el-button type="primary" @click="save">确定</el-button>
      <el-button @click="showDialog = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { perssionListAPI } from '@/api/permission'
import { detailRoleAPI, assignPermAPI } from '@/api/role'
import { array2Tree } from '@/utils'
export default {

  data() {
    return {
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      showDialog: false,
      treeData: [],
      checkedList: [],
      id: ''
    }
  },

  methods: {
    async show(id) {
      this.id = id
      // 1. 加载出所有权限列表
      const res = await perssionListAPI()
      this.treeData = array2Tree(res.data, '0')
      // 2. 根据id获取出当前角色拥有的权限并选中
      const res2 = await detailRoleAPI(id)
      // 只能设置选中，但不能取消原本的选中
      // 解决办法：让每次选中时都是在全新的tree上选中的
      this.checkedList = res2.data.permIds
      // 3. 显示出对话框
      this.showDialog = true

    //   await this.$nextTick()
    //   // 用id去设置选中 - 能取消原本的选中，设置本次新的选中
    //   this.$refs.tree.setCheckedKeys(res2.data.permIds)
    },

    async save() {
      // 拿到被选中的id，发请求做分配权限
      const permIds = this.$refs.tree.getCheckedKeys()
      await assignPermAPI({
        // 给哪个角色分配
        id: this.id,
        // 给哪些权限
        permIds
      })
      this.$message.success('分配权限成功')
      // 隐藏对话框
      this.showDialog = false
    }
  }
}
</script>

<style>

</style>
